<template name="tabbar"> 
<view class="tabholder"> 
    <view class="tabbar_box" v-bind:style="tabbarstyle" v-if="tabbar.list">  
        <block  v-for="item in tabbar.list"  :key="item" >  
            <navigator class="tabbar_nav" :url="item.pagePath">  
                <image class="tabbar_icon" :src="item.selected ? item.selectedIconPath : item.iconPath"/>
                <text>{{item.text}}</text>  
            </navigator>  
        </block>  
    </view>
</view> 
</template>  


<script>
export default {
  data () {
    return {
      tabbar: {}
    }
  },
  computed: {
    tabbarstyle () {
      if (this.tabbar) {
        return `background-color:${this.tabbar.backgroundColor}; border-top-color:${this.tabbar.borderStyle}; ${this.tabbar.position === 'top' ? 'top:0' : 'bottom:0'}`
      }
    }
  },
  created () {
    console.log(this)
    this.tabbar = this.$store.state.tabbar
    console.log(this.tabbar)
  },
  methods: {
    editTabBar () {
      console.log(this)
    }

  }
}

</script>
<style lang='less' scoped>
.tabbar_box{  
    display: flex;  
    flex-direction: row;  
    justify-content: space-around;  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    z-index: 999;  
    width: 100%;  
    height: 120rpx;  
    border-top: 1rpx solid gray;   
}  
  
.tabbar_nav{  
    display: flex;  
    flex-direction: column;  
    justify-content: center;  
    align-items: center;  
    font-size: 28rpx;  
    height: 100%;  
}  
  
.tabbar_icon{  
    width: 61rpx;  
    height: 61rpx;  
} 
.tabholder{
  width: 100%;  
  height: 120rpx;  
  border-top: 1rpx;
}
</style>